<template>
  <div class="trackIn">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <p>{{ $t('TrackIn') }}</p>
      </div>
      <el-form ref="trackInForm" :model="formInline" :rules="rules" label-width="120px" >
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('handlerId')">
              <el-input
                v-model="$route.params.eqp1Id"
                :disabled="true"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('testerId')" prop="testerId">
              <el-input v-model="formInline.testerId" :disabled="testDisableBtn">
                <el-select
                  slot="append"
                  v-model="formInline.headId"
                  :disabled="testDisableBtn"
                  placeholder="1"
                  style="width: 110px; padding:0 20px"
                >
                  <el-option :value="1" label="1"/>
                  <el-option :value="2" label="2"/>
                  <el-option :value="3" label="3"/>
                </el-select>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('lotId')" prop="lotId">
              <el-input
                v-model="formInline.lotId"
                class="input-with-select"
                @keydown.enter.native="getLotInfo"
              >
                <template slot="append">
                  <div class="append-get" @click="getLotInfo">GET</div>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('processFlow')">
              <el-input
                v-model="formInline.processFlowName"
                :disabled="true"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('productName')">
              <el-input
                v-model="formInline.productName"
                :disabled="true"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('packageType')">
              <el-input
                v-model="formInline.packageType"
                :disabled="true"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('customerLotId')">
              <el-input
                v-model="formInline.customerLotID"
                :disabled="true"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('customer')">
              <el-input
                v-model="formInline.customerCode"
                :disabled="true"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('testProgramName')">
              <el-input
                v-model="formInline.testSpec.testProgramName"
                :disabled="true"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="Load Board" prop="loadBoard">
              <el-input
                v-model="formInline.loadBoard"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="Change Kit" prop="changeKit">
              <el-input
                v-model="formInline.changeKit"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="Match Plate" prop="matchPlate">
              <el-input
                v-model="formInline.matchPlate"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="formInline.eqcQty > 0">
          <el-col :span="12">
            <el-form-item :label="`${'EQC'+ $t('nums')}`" >
              <el-input
                v-model="formInline.eqcQty"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row>
        <el-col :span="6" :offset="22">
          <el-button
            :loading="btnLoading"
            :disabled="btnDisable"
            type="primary"

            icon="el-icon-receiving"
            @click="approval">{{ $t('TrackIn') }}</el-button>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
<script>
import trackApi from '@/api/production/track'
import mySetting from '@/mixins/mySetting'
import networkTips from '@/mixins/networkTips'
import { replaceStr } from '@/utils/notification'
export default {
  name: 'TrackIn',
  components: {},
  mixins: [mySetting, networkTips],
  data() {
    return {
      formInline: {
        testSpec: {}, // 后端数据嵌套过深
        headId: 1
      },
      aqlInfo: {},
      btnLoading: false,
      btnDisable: false,
      testDisableBtn: false,
      options: [],
      tableData: [],
      rules: {
        testerId: [
          { required: true, message: `${this.$t('pleaseInput')}${this.$t('testerId')}`, trigger: 'blur' }
        ],
        lotId: [
          { required: true, message: `${this.$t('pleaseInput')}${this.$t('lotId')}`, trigger: 'blur' }
        ],
        loadBoard: [
          { required: true, message: `${this.$t('pleaseInput')}Load Board`, trigger: 'blur' }
        ],
        changeKit: [
          { required: true, message: `${this.$t('pleaseInput')}Change Kit`, trigger: 'blur' }
        ],
        matchPlate: [
          { required: true, message: `${this.$t('pleaseInput')}Match Plate`, trigger: 'blur' }
        ]
      },
      getLotInfoFlag: false
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getBindingInfo()
  },
  mounted() {},
  methods: {
    // 点击获取工单信息
    async getLotInfo() {
      if (!this.formInline.lotId) return
      const obj = {
        Eqp1Id: this.$route.params.eqp1Id,
        LotId: this.formInline.lotId
      }
      const res = await trackApi.getLotInfo(this.$clearNull(obj))
      this.$betterTips(res)
      this.formInline = Object.assign({}, this.formInline, res.data.aqlInfo, res.data.lotInfo)
      this.aqlInfo = res.data.aqlInfo
      this.getLotInfoFlag = true
    },
    // 确认开批
    doConfirm() {
      this.$refs['trackInForm'].validate((valid) => {
        if (valid) {
          if (!this.getLotInfoFlag) {
            this.$notify({
              message: '需要点击Get',
              type: 'warning',
              duration: 0
            })
            return
          }
          this.btnLoading = true
          this.aqlInfo.eqcQty = this.formInline.eqcQty
          const obj = {
            eqp1Id: this.$route.params.eqp1Id,
            eqp2Id: `${this.formInline.testerId}_${this.formInline.headId}`,
            testerId: this.formInline.testerId,
            lotId: this.formInline.lotId,
            loInfoRedisId: this.formInline.loInfoRedisId,
            loadBoard: this.formInline.loadBoard,
            changeKit: this.formInline.changeKit,
            matchPlate: this.formInline.matchPlate,
            eqcQty: this.formInline.eqcQty,
            aqlInfo: this.aqlInfo
          }
          trackApi.doConfirm(this.$clearNull(obj)).then((res) => {
            // 没必要专门针对trackin成功提示信息配置option
            if (res.code === 1) {
              this.btnLoading = false
              this.btnDisable = true
              this.$notify({
                title: this.$t('1'),
                type: 'success',
                duration: 0
              })
            } else {
              this.$alert(replaceStr(this.$t(String(res.message)), res.data), this.$t('trackInErrorInfo'), {
                confirmButtonText: this.$t('determine'),
                type: 'warning',
                callback: action => {
                  this.btnLoading = false
                }
              })
            }
          })
        } else {
          return false
        }
      })
    },
    // 确认开批
    approval() {
      this.$confirm(this.$t('sureTrackIn'), this.$t('tip'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(() => {
          this.doConfirm()
        })
    },
    async getBindingInfo() {
      const res = await trackApi.getBindingInfo({ handlerId: this.$route.params.eqp1Id })
      if (res.data.testerId && res.data.headId) {
        this.formInline = Object.assign({}, this.formInline, res.data)
        this.testDisableBtn = true
      }
    }
  }
}
</script>
<style lang='scss' scoped>
.box-card {
  width: 1100px;
  margin: 20px auto;
    p {
    font-size: 16px;
    font-weight: bold;
  }
}
::v-deep .el-card__header {
  padding: 0;
  padding-left: 15px;
}
::v-deep .el-input-group__append {
  padding: 0;
  cursor: pointer;
  .append-get {
    width: 60px;
    height: 30px;
    display: block;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.el-row {
  margin-top: 20px;
}
</style>
